<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 
			圣杯布局和双飞翼布局的对比 
			1、两种布局方式都是把中间列放在文档流最前面优先加载；
			2、两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局；
			3、不同在于中间列的设置
				圣杯布局利用父容器的左右内边距+两个从列相对定位；
				双飞翼布局在中间列设置水平内边距，挤出一个部分，真正存放内容。
			*/
			
			* {
				margin: 0;
				padding: 0;
			}

			#header,
			#footer {
				border: 1px solid;
				background: gray;
				text-align: center;
			}

			#content {
				overflow: hidden;
			}

			body {
				min-width: 600px;
			}

			#content .middle,
			#content .left,
			#content .right {
				/*这是“伪等高布局”*/
				padding-bottom: 10000px;
				margin-bottom: -10000px;
				min-height: 50px;
				/*左中右三个元素都要浮动*/
				float: left;
				/* text-align: center; */
				line-height: 50px;
			}

			/*双飞翼布局*/
			#content .left,
			#content .right {
				background: pink;
				width: 200px;
			}

			#content .middle {
				background: deeppink;
				width: 100%;
			}

			/*这两个是重点*/
			#content .left {
				margin-left: -100%;
			}

			#content .right {
				margin-left: -200px;
			}
			
			#content .m_inner{
				padding: 0 200px;
			}
		</style>
	</head>
	<body>
		<div id="header">
			<h4>header</h4>
		</div>
		<div id="content">
			<div class="middle">
				<div class="m_inner">
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
					middle <br />
				</div>
			</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<div id="footer">
			<h4>footer</h4>
		</div>
	</body>
</html>
